/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16px;

/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;

/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;

/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

.w20{width: 20% !important;}
.w25{width: 25% !important;}
.w30{width: 30% !important;}
.w33{width: 33% !important;}
.w48{width: 48% !important;}
.w49{width: 49% !important;}
.w50{width: 50% !important;}
.w60{width: 60% !important;}
.w80{width: 80% !important;}
.w90{width: 90% !important;}
.w92{width: 92% !important;}
.w94{width: 94% !important;}
.w96{width: 96% !important;}
.w98{width: 98% !important;}
.w100{width: 100% !important;}

.w20px{width: 20rpx !important;}
.w30px{width: 30rpx !important;}
.w36px{width: 36rpx !important;}
.w40px{width: 40rpx !important;}
.w60px{width: 60rpx !important;}
.w70px{width: 70rpx !important;}
.w80px{width: 80rpx !important;}
.w90px{width: 90rpx !important;}
.w100px{width: 100rpx !important;}
.w110px{width: 110rpx !important;}
.w120px{width: 120rpx !important;}
.w140px{width: 140rpx !important;}
.w150px{width: 150rpx !important;}
.w160px{width: 160rpx !important;}
.w180px{width: 180rpx !important;}
.w200px{width: 200rpx !important;}
.w220px{width: 220rpx !important;}
.w250px{width: 250rpx !important;}
.w300px{width: 300rpx !important;}
.w350px{width: 350rpx !important;}
.w400px{width: 400rpx !important;}

.h20{height: 20% !important;}
.h25{height: 25% !important;}
.h30{height: 30% !important;}
.h40{height: 40% !important;}
.h50{height: 50% !important;}
.h60{height: 60% !important;}
.h70{height: 70% !important;}
.h80{height: 80% !important;}
.h90{height: 90% !important;}
.h100{height: 100% !important;}

.h20px{height:20rpx !important;}
.h30px{height:30rpx !important;}
.h36px{height:36rpx !important;}
.h40px{height:40rpx !important;}
.h50px{height:50rpx !important;}
.h60px{height:60rpx !important;}
.h70px{height:70rpx !important;}
.h80px{height:80rpx !important;}
.h100px{height:100rpx !important;}
.h120px{height:120rpx !important;}
.h140px{height:140rpx !important;}
.h160px{height:160rpx !important;}
.h180px{height:180rpx !important;}
.h200px{height:200rpx !important;}
.h250px{height:250rpx !important;}
.h300px{height:300rpx !important;}

.vh100{height: 100vh !important;}
.vh50{height: 50vh !important;}
.vh25{height: 25vh !important;}
.vw100{width: 100vw !important;}
.vw50{width: 50vw !important;}
.vw25{width: 25vw !important;}

.mt4{margin-top: 4rpx;}
.mt6{margin-top: 6rpx;}
.ml5 { margin-left: 5rpx !important; }
.ml10 { margin-left: 10rpx !important; }
.ml15 { margin-left: 15rpx !important; }
.ml20 { margin-left: 20rpx !important; }
.ml30 { margin-left: 30rpx !important; }
.mr5 { margin-right: 5rpx !important; }
.mr10 { margin-right: 10rpx !important; }
.mr15 { margin-right: 15rpx !important; }
.mr20 { margin-right: 20rpx !important; }
.mr30 { margin-right: 30rpx !important; }
.mb5 { margin-bottom: 5rpx !important; }
.mb10 { margin-bottom: 10rpx !important; }
.mb15 { margin-bottom: 15rpx !important; }
.mb20 { margin-bottom: 20rpx !important; }
.mb30 { margin-bottom: 30rpx !important; }
.mb40 { margin-bottom: 40rpx !important; }
.mt5 { margin-top: 5rpx !important; }
.mt10 { margin-top: 10rpx !important; }
.mt15 { margin-top: 15rpx !important; }
.mt20 { margin-top: 20rpx !important; }
.mt30 { margin-top: 30rpx !important; }
.mt40 { margin-top: 40rpx !important; }

.pt4{box-sizing: border-box;padding-top: 4rpx;}
.pt6{box-sizing: border-box;padding-top: 6rpx;}
.pt10{box-sizing: border-box;padding-top: 10rpx;}
.pt20{box-sizing: border-box;padding-top: 20rpx;}
.pt30{box-sizing: border-box;padding-top: 30rpx;}
.pb20{box-sizing: border-box;padding-bottom: 20rpx;}
.pb10{box-sizing: border-box;padding-bottom: 10rpx;}
.pb30{box-sizing: border-box;padding-bottom: 30rpx;}
.pl10{box-sizing: border-box;padding-left: 10rpx;}
.pl20{box-sizing: border-box;padding-left: 20rpx;}
.pl30{box-sizing: border-box;padding-left: 30rpx;}
.pr10{box-sizing: border-box;padding-right: 10rpx;}
.pr20{box-sizing: border-box;padding-right: 20rpx;}
.pr30{box-sizing: border-box;padding-right: 30rpx;}

.pd5{padding: 5rpx;box-sizing: border-box;}
.pd10{padding: 10rpx;box-sizing: border-box;}
.pd15{padding: 15rpx;box-sizing: border-box;}
.pd20{padding: 20rpx;box-sizing: border-box;}
.pd30{padding: 30rpx;box-sizing: border-box;}
.pd40{padding: 40rpx;box-sizing: border-box;}
.pd50{padding: 50rpx;box-sizing: border-box;}
.pd5-row{padding-left: 5rpx;padding-right:5rpx;box-sizing: border-box;}
.pd10-row{padding-left: 10rpx;padding-right:10rpx;box-sizing: border-box;}
.pd15-row{padding-left: 15rpx;padding-right:10rpx;box-sizing: border-box;}
.pd20-row{padding-left: 20rpx;padding-right:20rpx;box-sizing: border-box;}
.pd30-row{padding-left: 30rpx;padding-right:30rpx;box-sizing: border-box;}
.pd50-row{padding-left: 50rpx;padding-right:50rpx;box-sizing: border-box;}
.pd10-column{padding-top: 10rpx;padding-bottom:10rpx; box-sizing: border-box;}
.pd20-column{padding-top: 20rpx;padding-bottom:20rpx; box-sizing: border-box;}
.pd30-column{padding-top: 30rpx;padding-bottom:30rpx; box-sizing: border-box;}
.pd50-column{padding-top: 50rpx;padding-bottom:50rpx; box-sizing: border-box;}

.flex-row { display: flex;flex-direction: row;}
.flex-row-center { display: flex;flex-direction: row;align-items: center;}
.flex-row-end { display: flex;flex-direction: row;align-items: center;justify-content: flex-end;}
.flex-column { display: flex;flex-direction: column;}
.flex-column-center { display: flex;flex-direction: column;align-items: center;}
.flex-center { display: flex;align-items: center;justify-content: center;}
.al-flex-end{align-items: flex-end;}
.al-flex-start{align-items: flex-start;}
.ju-flex-end{justify-content: flex-end;}
.ju-flex-start{justify-content: flex-start;}
.ju-between{justify-content: space-between;}
.ju-around{justify-content: space-around;}
.row-between{align-items: space-between;}
.row-around{align-items: space-around;}
.wrap{flex-wrap: wrap;}

.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex6{flex: 6;}
.flex7{flex: 7;}
	
.f20{font-size: 20rpx;}
.f22{font-size: 22rpx;}
.f24{font-size: 24rpx;}
.f26{font-size: 26rpx;}
.f28{font-size: 28rpx;}
.f32{font-size: 32rpx;}
.f36{font-size: 36rpx;}
.f40{font-size: 40rpx;}
.f44{font-size: 44rpx;}
.f48{font-size: 48rpx;}
.f60{font-size: 60rpx;}
.f70{font-size: 70rpx;}
.f80{font-size: 80rpx;}
.f90{font-size: 90rpx;}
.f100{font-size:100rpx;}

.weight{font-weight: 600;}

.w-color{color:#fff;}
.base-color{color:#0583FE !important;}
.success-color{color:#1EAC4B;}
.mini-success-color{color:#E9F6EE;}
.warning-color{color:#FF8A00;}
.danger-color{color:#FE523C !important;}
.base-gray-color{color:#666;}
.gray-color{color:#909399;}

.base-bg{background:#0583FE;}
.success-bg{background:#1EAC4B;}
.mini-success-bg{background:#E9F6EE !important;}
.gray-success-bg{background:#e6f3eb !important}
.warning-bg{background:#FF8A00;}
.danger-bg{background:#FE523C;}
.gray-bg{background:#909399;}
.mini-gray-bg{background:#f9f9f9;}
.mini-big-gray-bg{background: #E9E9E9;}
.w-bg{background:#ffffff;}
	  
.grey{background: #f0f0f0;color: #999;}
.primary{background: rgba(0,122,255,0.1);color: #0583FE;}
.success{background: rgba(66,207,149,0.1);color: #1EAC4B;}
.warning{background: rgba(240,173,78,0.1);color: #FF8A00;}
.error{background: rgba(221,82,77,0.1);color: #FE523C;}

.radius5{border-radius: 5rpx;}
.radius6{border-radius: 6rpx;}
.radius10{border-radius: 10rpx;}
.radius15{border-radius: 15rpx;}
.radius20{border-radius: 20rpx;}
.radius30{border-radius: 30rpx;}
.radius40{border-radius: 40rpx;}
.radius50{border-radius: 50rpx;}
.radius60{border-radius: 60rpx;}
.radius70{border-radius: 70rpx;}
.radius80{border-radius: 80rpx;}

.hidden{overflow: hidden;}
.overflow-x{overflow-x: auto;}
.overflow-x-h{overflow-x: hidden;}
.overflow-y{overflow-y: auto;}
.overflow-y-h{overflow-y: hidden;}
.overflow-h{overflow:hidden;}

.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}

// 超出部分显示省略号 1行
.lineOne{
	display: -webkit-flex;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	word-break: break-all;
}
//-2行
.lineTwo{
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
//-3行
.lineThree{
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
//-4行
.lineFour{
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

//其他
::v-deep button::after{border: none !important;}
